import React, { Component } from 'react'
import  DividerItem  from '@/components/DividerItem';
import  ListCard  from '@/components/ListCard';
import styled from 'styled-components';
import { Row, Col, Table, Button } from 'antd';
import Link from 'umi/link';
import {connect} from 'dva'
export interface IProps {
  dispatch?: ({ type }: { type: string, payload?: any }) => Promise<any>;
  children?: React.ReactNode,
  loading: boolean,
  buttons?: Array<any>,
  list: {
    data: Array<any>,
    dataCnt: number
  },
  details? : Object,
  form: Object
}

 const ListCardRow = styled(Row)`
  border-right: 1px solid #eaeaea;
`
 const ListCardItem = styled(Col)`
  height: 50px;
  padding: 0px 25px;
  border: 1px solid #eaeaea;
  border-top: 0;
  border-right: 1px solid #eaeaea;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
`
@connect(({micro}) => ({
  details: micro.details || {},
  
}))
export default class Details extends Component<any> {

  componentDidMount() {
    const {dispatch, details } = this.props
    const { config={} } = details
    dispatch({type: 'micro/queryInfo'})
  }
  render() {
    const {details} = this.props
    const { config={} } = details
    // let data =  [
    //   {
    //     key: 7,
    //     name: '张晓荣',
    //     age: '20',
    //     type: '站长',
    //     sex: '男',
    //     contact: '110',
    //   },
    //   {
    //     key: 8,
    //     name: '',
    //     age: '',
    //     type: '消防员',
    //     sex: '',
    //     contact: '',
    //   },
    // ]
     let data =  Array.isArray(details.member) && (details.member).map((item, ind) => ({
       key: ind,
       ...item
     })) || []
  let columns = [
      {
        title: '成员',
        dataIndex: 'kind',
        editable: true,
      },
      {
        title: '姓名',
        dataIndex: 'name',
        editable: true,
      },
      {
        title: '性别',
        dataIndex: 'gender',
        editable: true,
      },
      {
        title: '年龄',
        dataIndex: 'age',
        editable: true,
      },
      {
        title: '联系方式',
        dataIndex: 'mobile',
        editable: true,
      },
    ];

    const mData = [
      {
      name: '微型消防站名称',
      value: details.name || '-'
    },
    {
      name: '地址',
      value: details.address || '-'
    },
    {
      name: '值班室电话',
      value: details.telephone || '-'
    }
  ]
  const eData = [
    {
      name: '灭火器',
      value: `${config.FE || 0}个`
    },
    {
      name: '水袋',
      value: `${config.WB || 0}条`
    },
    {
      name: '水枪',
      value: `${config.WG || 0}个`
    }, 
     {
      name: '消防头盔',
      value: `${config.FH || 0}个`
    },
    {
      name: '灭火防护服',
      value: `${config.FC || 0}条`
    },
    {
      name: '防护靴',
      value: `${config.PB || 0}个`
    },
]
    const E = () => (
      <>
        <ListCard data={eData}/>
        <ListCardRow>
          <ListCardItem style={{ background: '#F0F6FA', color: '#000000' }} span={3}>破拆工具</ListCardItem>
            <ListCardItem style={{ color: '#000', overflowY: 'auto' }} span={21}>
              {config.BT || 0}套
            </ListCardItem>
        </ListCardRow>
      </>
    )
    const MainInfo = DividerItem({ WrapperComponent: () => <ListCard data={mData} />, icon:'ordered-list', title: '基础信息',  height: 'auto'}); //基础信息
		const Equip = DividerItem({ WrapperComponent: () => <E/>, icon:'ordered-list', title: '配备情况',  height: 'auto'}); //配备情况
    const PeopleManage = DividerItem({ WrapperComponent: () =>
    <Table
      bordered
      dataSource={data}
      columns={columns}
      pagination={false}
    />, icon:'user', title: '成员管理',  height: 'auto'}); //成员管理
    return (
      <>
      <MainInfo/>
      <Equip/>
      <PeopleManage/>
      <Link to="/data/micro/create" >
          <Button type="primary" style={{ marginTop: '50px', width: "80px", marginLeft: 36 }}>编&nbsp;&nbsp;&nbsp;辑</Button>
        </Link>
      </>
    )
  }
}
